<template>
  <page-header-wrapper>
    <template #extra>
      <a-button type="primary" v-if="!updateActionDate.state" @click="toStartEdit">
        修改
      </a-button>
      <a-button type="primary" style="margin-left: 10px"
                v-if="updateActionDate.state" @click="onsubmit">
        保存
      </a-button>
      <a-button type="primary" style="margin-left: 10px"
                v-if="updateActionDate.state"
                @click="toCancelEdit"
      >
        返回
      </a-button>
    </template>
    <div class="table-page-search-wrapper">
      <a-card :loading="loading">
        <div slot="title">
          页面详情
        </div>
        <div v-if="!(loading||updateActionDate.data==null)">
          <a-form :layout="'inline'">
            <a-row :gutter="48">
              <a-col :lg="8" :md="12" :xs="24">
                <a-form-item :read-only="true" label="创建时间">
                  {{ updateActionDate.data.createAt }}
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
          <a-form>
            <a-form-item label="页面详情">
              <tinymce-editor v-model:value="updateActionDate.data.template"
                              :disable="!updateActionDate.state">
              </tinymce-editor>
            </a-form-item>
          </a-form>
        </div>
      </a-card>
    </div>
  </page-header-wrapper>
</template>

<script>

import router from '@/router'
import {searchDiyById, updateDiyById} from "@/api/modules/DiyRequest";
import {addFreemarkerMail, searchFreemarkerMailByMailType, updateFreemarkerMailById} from "@/api/modules/MailRequest";

export default {
  name: "SelfDefineMail",
  data() {
    return {
      updateActionDate: {
        state: false,
        data: null
      },
      type:null,
      id:null,
      data: null,
      loading: false,
    }
  },
  mounted() {
    let a=router.currentRoute.fullPath
    this.type=a[a.length-1]
    this.init()
  },
  methods: {
    async init() {
      this.loading = true;
      await this.refreshData();
      this.loading = false;
    },
    async toStartEdit() {
      this.updateActionDate.state = true;
    },
    async refreshData(){
      let _this=this;
      searchFreemarkerMailByMailType(this.type).then(res=>{
        _this.data=res.data;
        _this.updateActionDate.data=JSON.parse(JSON.stringify(_this.data))
      })
    },
    async toCancelEdit() {
      this.updateActionDate.data = JSON.parse(JSON.stringify(this.data))
      this.updateActionDate.state = false;
    },
    onChangeDetails(value){
      if (this.updateActionDate.state) {
        this.updateActionDate.data.info = value;
      }
    },
    async onsubmit(){
      if(this.loading)return;
      this.loading=true;
      let _this=this;
      let data=Object.assign({},this.updateActionDate.data);
      delete data.updateAt
      delete data.createAt
      delete data.id
      await addFreemarkerMail(data).then(async (res)=>{
        await _this.refreshData();
        _this.updateActionDate.state=false;
        _this.$notification.success({
          message:res.message
        })
      }).catch((res)=>{
        _this.$notification.warning({
          message:res.message
        })
      })

      this.loading=false;
    },
  },
  watch: {
    $route: {
      handler(val, oldVal){
        let a=val.fullPath
        this.type=a[a.length-1]
        this.init();
      },
      // 深度观察监听
      deep: true
    }
  },

}
</script>

<style scoped>

</style>